<template>
  <div class="main-sheet">
    <div class="item" v-for="(kahao,index) in kahaoList">
      <div>{{ kahao.payCustId }}<span>{{ kahao.status}}</span></div>
      <a @click="del(kahao)">删除</a>
    </div>
    <div class="foot" @click="add">新增月结卡号</div>
    <mytoast ref="mytoast"/>
    <div class="tankuang" v-if="showEdit">
      <div class="tankuang-main">
        <div class="title">新增月结卡号</div>
        <div class="content">
          <input type="text" v-model="xinzengkahao" maxlength="10" placeholder="请输入10位以内月结卡号">
        </div>
        <div class="tankuang-caozuo">
          <a
            style="color: #373E4F;float: left;border-right: 0.5px solid #E8EAF0"
            @click="doCancle"
          >取消</a>
          <a
            style="color: #0077FF;float: right"
            @click="doConfirm"
          >确定</a>
        </div>
      </div>
    </div>
    <tanchuan ref="tanchuanDel" :title="title" :content="content" @doCancle="doCancleDel"
              @doConfirm="doConfirmDel"></tanchuan>
  </div>
</template>

<script>

    import tanchuan from '@/components/tanchuan'
    import mytoast from '@/components/toast'
    import api from '@/utils/api'

    export default {
        components: {tanchuan, mytoast},

        data() {
            return {
                title: "确定删除",
                content: '确定删除此月结卡号？',
                toastMsg: "",
                toastVisible: false,
                kahaoList: [],
                currentkahao: null,
                xinzengkahao : '',
                showEdit : false
            }
        },

        created() {

        },

        onLoad(options) {
            this.list();
        },


        methods: {
            //获取列表
            list() {
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.getCustInfoList + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {},
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.mytoast.show(res.data.msg);
                            return ;
                        }
                        _this.kahaoList = [];
                        if( res.data.data ){
                            res.data.data.forEach(data =>{
                                data.status = data.payCustIdStatus == '1' ? '已审核' : '未审核';
                                _this.kahaoList.push(data);
                            })
                        }

                    },
                    fail() {
                        _this.$refs.mytoast.show('网络异常')
                    }
                })
            },

            del(kahao) {
                this.currentkahao = kahao;
                this.$refs.tanchuanDel.show();
            },
            add() {
              this.showEdit = true;
            },
            doCancle(){
                this.showEdit = false;
            },
            doConfirm(){
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.addCustInfoSkin + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {
                        payCustId : this.xinzengkahao,
                    },
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.mytoast.show(res.data.msg);
                            return ;
                        }
                        _this.$refs.mytoast.show('添加成功')
                        _this.list();
                    },
                    fail() {
                        _this.$refs.mytoast.show('网络异常')
                    },
                    complete(){
                        _this.showEdit = false;
                    }
                })
            },
            doCancleDel() {
                this.$refs.tanchuanDel.hidden();
                this.$refs.mytoast.show('取消删除')
            },
            doConfirmDel() {
                var _this = this;
                wx.request({
                    url: wx.getStorageSync("otherPath") + api.deleteCustInfo + "?ecstoken=" + wx.getStorageSync('sessionId'),
                    method: "POST",
                    header: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                        ecstoken : wx.getStorageSync('sessionId'),
                        fslb : wx.getStorageSync('fslb')
                    },
                    data: {
                        payCustId : this.currentkahao.payCustId
                    },
                    success(res) {
                        if(res.data.code != 200){
                            _this.$refs.mytoast.show(res.data.msg);
                            return ;
                        }
                        _this.$refs.mytoast.show('删除成功');
                        _this.list();
                    },
                    fail() {
                        _this.$refs.mytoast.show('网络异常')
                    },
                    complete(){
                        _this.$refs.tanchuanDel.hidden();
                    }

                })
            }
        }
    }
</script>

<style lang="wxss">
  page {
    width: 100%;
    height: 100%;
    background-color: #F7FBFF;
  }
</style>

<style scoped>
  .main-sheet {
    width: 100%;
    height: 100%;
  }

  .item {
    padding-left: 15px;
    padding-right: 15px;
    margin-top: 10px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(55, 62, 79, 1);
    line-height: 100px;
    height: 100px;
    background: rgba(255, 255, 255, 1);
    border-bottom: 1px solid #e8eaf0;
  }

  .item div {
    width: 100%;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #e8eaf0;
  }

  .item span{
    text-align: right;
    float: right;
    width: 18%;
    height: 50px;
    line-height: 50px;
  }

  .item a {
    text-align: right;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(0, 119, 255, 1);
  }


  .foot {
    text-align: center;
    vertical-align: middle;
    width: 100%;
    height: 40px;
    position: fixed;
    bottom: 0;
    background-color: #0077FF;
    font-size: 15px;
    font-family: PingFang SC;
    font-weight: 500;
    color: rgba(255, 255, 255, 1);
    line-height: 40px;
  }

  .tankuang-main {
    width: 80%;
    height: 120px;
    position: absolute;
    top: 40%;
    left: 10%;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 25px;
    z-index: 100;
    text-align: center;
  }
 .tankuang-main .content input {
   width:100%;
   border-bottom:2rpx solid #e8eaf0;
 }
  .title {
    height: 40px;
    font-size: 18px;
    font-family: PingFang-SC-Bold;
    font-weight: bold;
    color: #373e4f;
    line-height: 40px;
  }

  .content {
    vertical-align: top;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .content span {
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 500;
    color: #373e4f;
    line-height: 40px;
  }

  .content img {
    height: 25px;
    width: 25px;
    margin-right: 5px;
  }

  .tankuang-caozuo {
    height: 40px;
    line-height: 40px;
    display: flex;
  }

  .tankuang-caozuo a {
    display: inline-block;
    width: 50%;
    font-size: 18px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 50px;
    height: 40px;
    line-height: 40px;
    border-top: 0.5px solid #e8eaf0;
  }

  .tankuang {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 23, 50, 0.5);
    /* opacity: 0.5; */
    z-index: 99;
  }
</style>
